<template>
  <view>
    <image
      class="header_img"
      src="https://svip-picture.oss-cn-hangzhou.aliyuncs.com/baokuan/zhuce/zhuce/login_bg.png"
    ></image>
    <view class="wrapper">
      <text class="phone_text">手机号码</text>
      <input
        class="phone"
        type="text"
        placeholder="请输入手机号码"
        v-model="phone"
      >
      <view class="border_top"></view>
      <text class="phone_text">验证码</text>
      <view class="code_wrapper">
        <input
          class="phone code_input"
          placeholder="请输入验证码"
          type="text"
          v-model="code"
        >
        <view
          class="code_btn"
          @click="getCode"
        >
          {{count?`${count}s`:`获取验证码`}}
        </view>
      </view>
      <view class="border_top"></view>
      <!-- <button>验证码</button> -->
      <view class="login">
        <view class="login_left">注册/登录</view>
        <view class="login_right">
          <image
            v-if="phone&&code"
            @click="submit"
            class="login_right_img"
            src="https://svip-picture.oss-cn-hangzhou.aliyuncs.com/baokuan/zhuce/zhuce/Login_Btn_Per.png"
          ></image>
          <image
            class="login_right_img"
            v-else
            src="https://svip-picture.oss-cn-hangzhou.aliyuncs.com/baokuan/zhuce/zhuce/Login_Btn.png"
          ></image>
        </view>
      </view>
      <!-- <button @click="getUserInfo">获取用户信息</button> -->
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      code: "",
      orgId: "",
      count: 0
    };
  },
  onLoad() {
    // #ifdef MP-WEIXIN
    this.getOrgId();
    // #endif
  },
  methods: {
    getOrgId() {
      uni.request({
        url:
          "https://kq.hzslsf.com/user-server/internal/organization/getRootOrgId", //仅为示例，并非真实接口地址。
        success: res => {
          this.orgId = res.data.data;
          console.log(res.data.data);
        }
      });
    },
    getCode() {
      if (!this.phone) {
        uni.showToast({
          icon: "none",
          title: "请填写手机号",
          duration: 2000
        });
        return;
      }
      if (this.count > 0) {
        return;
      }
      this.getCodeTime();
      uni.showToast({
        icon: "loading",
        title: "正在获取验证码",
        duration: 2000
      });
      // #ifdef MP-WEIXIN
      const url =
        "https://kq.hzslsf.com/webchatmall-server/api/auth/sendSmsCode";
      // #endif
      // #ifdef H5
      const url =
        "https://customer.hzslsf.com/webchatslzt-server/api/webchat/getSmsCode";
      // #endif
      uni.request({
        url,
        method: "POST",
        data: {
          phone: this.phone
        },
        success: res => {
          console.log(res.data);
          this.text = "request success";
        }
      });
    },
    submit() {
      // #ifdef MP-WEIXIN
      this.uma.trackEvent("login");
      // #endif
      uni.showToast({
        icon: "loading",
        title: "正在登录中",
        duration: 2000
      });
      // #ifdef MP-WEIXIN
      const url = "https://kq.hzslsf.com/webchatmall-server/api/auth/login";
      // #endif
      // #ifdef H5
      const url =
        "https://customer.hzslsf.com/webchatslzt-server/api/webchat/registerOrLogin";
      // #endif
      uni.request({
        url,
        method: "POST",
        data: {
          phone: this.phone,
          // #ifdef MP-WEIXIN
          orgId: this.orgId,
          // #endif
          // #ifdef H5
          openId: JSON.parse(uni.getStorageSync("openId")),
          // #endif
          smsCode: this.code
        },
        success: res => {
          if (res.data.code === 20000 || res.data.code !== 10000) {
            uni.showToast({
              icon: "none",
              title: res.data.message,
              duration: 2000
            });
            return;
          }
          // #ifdef MP-WEIXIN
          uni.setStorageSync("mToken", res.data.data);
           uni.navigateTo({
            url: "/pages/index/index"
          });
          // #endif
          // #ifdef H5
          uni.setStorageSync("uToken", res.data.data.uToken);
          window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxed883f0e007398fc&redirect_uri=http%3A%2F%2Fcustomer.hzslsf.com%2Fbaokuan%2F%23%2F&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect'
          // #endif
         
        },
      });
    },
    getCodeTime() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    }
  }
};
</script>

<style>
.wrapper {
  padding: 0 50rpx;
}
.code_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.code_btn {
  width: 150rpx;
  text-align: center;
  margin-bottom: 20rpx;
  border: 1px solid #98999f;
  color: #919191;
  font-size: 22rpx;
  padding: 20rpx 0;
  border-radius: 10rpx;
}
.header_img {
  width: 100%;
  height: 490rpx;
}
.phone_text {
  font-size: 24rpx;
  color: #919191;
}
.phone {
  padding: 20rpx 0;
}
.border_top {
  border-top: 1px solid #eeeeee;
  margin-bottom: 30rpx;
}
.login {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login_left {
  font-size: 50rpx;
  font-weight: bold;
}
.login_right {
  height: 126rpx;
  width: 126rpx;
}
.login_right_img {
  height: 100%;
  width: 100%;
}
</style>